<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <span>用户列表</span>
      </div>
      <el-table :data="userData" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="ad" label="身份" width="180"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              title="确定是否删除当前用户？"
              @confirm="handleDelete(scope.row.id)"
            >
              <el-button slot="reference" size="mini" type="danger"
                >删除</el-button
              >
            </el-popconfirm>
            <el-dialog
              title="编辑用户"
              :visible.sync="dialogVisible"
              width="30%"
            >
              <el-form
                label-position="编辑用户"
                label-width="80px"
                :model="usersform"
              >
                <el-form-item label="用户名">
                  <el-input v-model="usersform.username"></el-input>
                </el-form-item>
                <el-form-item label="用户身份">
                  <el-input v-model="usersform.ad"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
              </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      dialogVisible: false,
      userData: [],
      usersform: {
        id: "",
        username: "",
        ad: "",
      },
    };
  },
  mounted() {
    this.getAllUser();
  },
  methods: {
    // 提交用户
    submit() {
      let data = {
        username: this.usersform.username,
        ad: this.usersform.ad,
      };
      let pattern = /^[\u4E00-\u9FA5A-Za-z0-9_]+[\u4E00-\u9FA5A-Za-z0-9_ ]+$/;
      let patternad = /^[\u4e00-\u9fa5]{0,}$/;
      if (!pattern.test(data.username)) {
        this.$message.error("用户名不能为空!");
        return;
      }
      if (!patternad.test(data.ad)) {
        this.$message.error("用户身份格式错误!");
        return;
      }
      this.$axios
        .put("/users/" + this.usersform.id, data)
        .then((res) => {
          if (res.status == 200) {
            this.getAllUser();
            this.dialogVisible = false;
            this.$message.success("修改用户成功!");
          } else {
            this.$message.error("修改用户失败!");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑用户
    handleEdit(row) {
      this.usersform.id = row.id;
      this.usersform.username = row.username;
      this.usersform.ad = row.ad;
      this.dialogVisible = true;
    },
    // 获取用户
    getAllUser() {
      this.$axios
        .get("/users")
        .then((res) => {
          if (res.status == 200) {
            this.userData = res.data;
          } else {
            console.log("获取用户数据失败!");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除用户
    handleDelete(id) {
      this.$axios
        .delete("/users/" + id)
        .then((res) => {
          if (res.status == 200) {
            this.getAllUser();
            this.$notify({
              title: "成功",
              message: "删除当前用户成功!",
              type: "success",
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: "删除当前用户失败!",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>